<template>
  <div class="monitor-stats-block">
    <div class="block-header">
      <span class="block-title">监测统计</span>
    </div>
    <div class="stats-content">
      <div class="gauge-box">
        <div ref="gaugeRef" class="gauge-chart"></div>
      </div>
      <div class="stats-cards">
        <div class="stats-card">
          <img class="stats-icon" src="https://cdn.jsdelivr.net/gh/iconoir-icons/svg/warning-triangle.svg" alt="告警" />
          <div class="stats-info">
            <div class="stats-label">告警数</div>
            <div class="stats-value">169</div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="stats-card">
          <img class="stats-icon" src="https://cdn.jsdelivr.net/gh/iconoir-icons/svg/check-circle.svg" alt="完成" />
          <div class="stats-info">
            <div class="stats-label">完成数</div>
            <div class="stats-value">169</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const gaugeRef = ref(null)
onMounted(() => {
  const chart = echarts.init(gaugeRef.value)
  chart.setOption({
    series: [{
      type: 'gauge',
      startAngle: 200,
      endAngle: -20,
      min: 0,
      max: 200,
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          width: 18,
          color: [
            [0.5, '#00eaff'],
            [1, '#1e3c5a']
          ]
        }
      },
      pointer: {
        show: true,
        length: '70%',
        width: 6
      },
      detail: {
        valueAnimation: true,
        fontSize: 32,
        color: '#00eaff',
        offsetCenter: [0, '60%']
      },
      data: [{ value: 169 }],
      title: { show: false }
    }]
  })
})
</script>

<style scoped>
.monitor-stats-block {
  background: rgba(20,40,80,0.92);
  border-radius: 22px;
  box-shadow: 0 4px 32px #00eaff44, 0 2px 12px #0008;
  padding: 0 0 18px 0;
  position: relative;
  overflow: hidden;
}
.block-header {
  height: 10px;
  background: linear-gradient(90deg, #00eaff 0%, #1e3c5a 100%);
  border-radius: 22px 22px 0 0;
  margin-bottom: 12px;
}
.block-title {
  position: absolute;
  top: 16px;
  left: 32px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  z-index: 2;
  text-shadow: 0 0 6px #00eaff, 0 2px 8px #1e3c5a;
}
.stats-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  padding: 38px 18px 0 18px;
}
.gauge-box {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gauge-chart {
  width: 130px;
  height: 130px;
}
.stats-cards {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  background: rgba(0,234,255,0.06);
  border-radius: 14px;
  box-shadow: 0 2px 8px #00eaff22;
  padding: 10px 0 10px 0;
  min-width: 220px;
  height: 110px;
}
.stats-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
}
.stats-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 6px #00eaff88);
}
.stats-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.stats-label {
  font-size: 15px;
  opacity: 0.8;
  color: #fff;
}
.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #00eaff;
  margin-top: 2px;
  text-shadow: 0 0 6px #00eaff;
}
.divider {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, #00eaff 0%, #1e3c5a 100%);
  border-radius: 2px;
  margin: 0 8px;
}
</style> 
